layui.use(['table', 'admin', 'ax'], function () {
    var $ = layui.$;
    var table = layui.table;
    var $ax = layui.ax;
    var admin = layui.admin;


// 获取详情信息，填充表单
    var ajax = new $ax(Feng.ctxPath + "/rec/carrierRecDetail/tooTimeLineDetailed?dispatchNumber=" + Feng.getUrlParam("dispatchNumber"));
    var result = ajax.start();

    function renderTimeline(data) {
        var container = document.getElementById('timelineContainer');
        // 1. 时间轴容器
        var timeline = document.createElement('div');
        timeline.className = 'layui-timeline';

        // 2. 时间轴列表
        data.forEach(function (item) {
            // 创建时间轴项
            var timelineItem = document.createElement('div');
            timelineItem.className = 'layui-timeline-item';

            // 创建时间轴点
            var timelineAxis = document.createElement('i');
            timelineAxis.className = 'layui-icon layui-timeline-axis';
            timelineAxis.innerHTML = '&#xe62d;'; // 这是layui的时间轴图标
            timelineItem.appendChild(timelineAxis);

            // 创建内容区域
            var content = document.createElement('div');
            content.className = 'layui-timeline-content layui-text';

            // 创建标题
            var title = document.createElement('h3');
            title.className = 'layui-timeline-title';
            title.textContent = item.reviewTime; // 精确到时分秒
            content.appendChild(title);

            // 创建内容段落
            var p = document.createElement('p');
            // 审核状态：加粗
            var statusSpan = document.createElement('span');
            statusSpan.innerHTML = '<strong>审核状态:</strong> <span style="color: #009688;">' + item.recStatus + '</span><br>';
            p.appendChild(statusSpan);
            // 审核人：加粗并换行
            var reviewSpan = document.createElement('span');
            reviewSpan.innerHTML = '<strong>审核人:</strong> ' + item.review + '<br>';
            p.appendChild(reviewSpan);
            content.appendChild(p);

            // 备注原因
            var processRemark = document.createElement('p');
            if (item.processRemark) {
                processRemark.innerHTML = '<strong>备注原因:</strong> ' + item.processRemark;
            }
            content.appendChild(processRemark);

            // 将内容添加到时间轴项
            timelineItem.appendChild(content);
            timeline.appendChild(timelineItem);
        });

        // 添加最后一个时间轴项，显示下一步是谁
        var lastTimelineItem = document.createElement('div');
        lastTimelineItem.className = 'layui-timeline-item';

        // 创建时间轴点
        var lastTimelineAxis = document.createElement('i');
        lastTimelineAxis.className = 'layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis';
        lastTimelineAxis.innerHTML = '&#xe60f;'; // 使用新的图标
        lastTimelineItem.appendChild(lastTimelineAxis);

        // 创建内容区域
        var lastContent = document.createElement('div');
        lastContent.className = 'layui-timeline-content layui-text';

        // 创建标题
        var lastTitle = document.createElement('h3');
        lastTitle.className = 'layui-timeline-title';
        lastTitle.textContent = '等待下一步操作';
        lastContent.appendChild(lastTitle);

        // 创建内容段落
        var lastP = document.createElement('p');

        // 根据 recStatus 判断下一步是谁
        var nextStep = '';
        if (data.length > 0) {
            var lastItem = data[data.length - 1];
            if (lastItem.recStatus === '财务已审核') {
                nextStep = '当前步骤尚未完成，请等待承运商确认。';
            } else if (lastItem.recStatus === '承运商已确认') {
                nextStep = '等待财务确定。';
            }else if (lastItem.recStatus === '申诉待解决') {
                nextStep = '等待财务处理。';
            } else {
                nextStep = '等待生成提报应付单。';
            }
        } else {
            nextStep = '没有数据可以渲染时轴。';
        }

        lastP.innerHTML = '<strong style="color: red;">' + nextStep + '</strong>';
        lastContent.appendChild(lastP);

        // 将内容添加到最后一个时间轴项
        lastTimelineItem.appendChild(lastContent);

        // 将最后一个时间轴项添加到时间轴
        timeline.appendChild(lastTimelineItem);

        // 清空容器并添加新的时间轴
        container.innerHTML = '';
        container.appendChild(timeline);
    }

    // 调用函数渲染时轴
    renderTimeline(result.data);
});
